<template>
	<view class="content">
		<!-- 头部，包括个人信息+UUID+订单数据宫格菜单 -->
		<view class="my-header pdt-20 pdb-50">
			<!-- 个人信息 -->
			<view class="information">
				<!-- 点击头像进入设置页面 -->
				<view class="pic-wrap" @click="onSetting">
					<button type="balanced">
						<image :src="user.avatarUrl" class="photo"></image>
					</button>
				</view>
				<view class="name-wrap">
					<span class="name">{{user.nickName}}</span>
					<!-- <span class="level">lv.1</span> -->
				</view>
				<view class="uuid-wrap">
					<span class="uuid">哈哈哈</span>
				</view>
			</view>
		</view>
		<view class="my-body">
			<!-- 订单数据 -->
			<view class="order pdb-10">
				<view class="top">
					<span class="title">我的订单</span>
					<span class="more-btn">查看全部</span>
				</view>
				<view class="order-grid">
					<u-grid :border="false" @click="click" col="5">
						<u-grid-item v-for="(baseListItem,baseListIndex) in ordersGrids" :key="baseListIndex">
							<u-icon :customStyle="{paddingTop:10+'rpx'}" :name="baseListItem.name" :size="24"></u-icon>
							<text class="grid-text">{{baseListItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>

			</view>
			<!-- 积分 + 优惠券 -->
			<view class="my-ticket">
				<!-- 网格 -->
				<view class="ticket-grid row">
					<!-- 积分 -->
					<view class="score col-xl-4 grid-item">
						<!-- 网格状 logo + 名字像首页菜单 -->
						<view>
							<view class="icon">
								0
							</view>
							<view class="title">
								我的积分
							</view>
						</view>
					</view>
					<!-- 优惠卡 -->
					<view class="card col-xl-4 grid-item">
						<view>
							<view class="icon">
								<u-icon :customStyle="{paddingTop:10+'rpx'}" name="integral" :size="24"></u-icon>
							</view>
							<view class="title">
								我的懒人卡
							</view>
						</view>
					</view>
					<!-- 优惠券 -->
					<view class="ticket col-xl-4 grid-item">
						<view>
							<view class="icon">
								<u-icon :customStyle="{paddingTop:10+'rpx'}" name="list-dot" :size="24"></u-icon>
							</view>
							<view class="title">
								优惠券
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 其他底部菜单 -->
			<view class="my-menu">
				<!-- 遍历菜单数组，每一个点击就进入不同页面操作 1-福利申领 2-常用出行人 3-我的会员 4-设置 5-客服 -->
				<u-cell-group customStyle="{'fontSize': '16px','padding':'15px'}">
					<!-- 循环 -->
					<u-cell v-for="item in menuList" :title="item.title" isLink :url="item.url"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="placeholder"></view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		computed: {
			...mapGetters(['user']), // 取出vuex中用户数据
		},
		data() {
			return {
				// 宫格菜单
				ordersGrids: [{
						name: 'order',
						title: '待付款'
					},
					{
						name: 'clock',
						title: '出票中'
					},
					{
						name: 'coupon',
						title: '待使用'
					},
					{
						name: 'checkmark-circle',
						title: '已使用'
					},
					{
						name: 'reload',
						title: '退单款'
					},
				],
				menuList: [{
						title: "设置",
						url: '/pages/main/my/modify'
					},
					{
						title: "客服",
						url: '/pages/main/index/index'
					},
				]
			}
		},
		methods: {
			onSetting() {
				uni.navigateTo({
					url: '/pages/main/my/modify'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 当前页面全局样式 */
	.content {
		background: var(--background-light);
		position: relative;
	}

	/* 头 */
	.my-header {
		background: var(--click-hover);
		background: linear-gradient(45deg, #68bdf9, rgb(45, 111, 185));

		// 个人信息
		.information {
			padding: 30px;
			padding-top: 50px;
			font-size: var(--font-size-default);
			color: var(--white);
			display: inline-grid;
			grid: 'pic name'
				'pic uuid';

			.pic-wrap {
				grid-area: pic;
				margin-right: 15px;

				button {
					background: var(--white);
					line-height: 80rpx;
					height: auto;
					width: auto;
					padding: 5rpx;
					margin: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;

					.photo {
						width: 75px;
						height: 75px;
						border-radius: 50%;
					}
				}
			}

			.name-wrap {
				line-height: 35px;
				grid-area: name;
			}

			.uuid-wrap {
				line-height: 35px;
				font-size: var(--font-size-medium);
				grid-area: uuid;
			}
		}
	}

	.my-body {
		padding: 20px;
		padding-top: 100px;
		position: relative;

		// 订单等
		.order {
			position: absolute;
			top: -50px;
			left: 20px;
			right: 20px;
			// height: 140px;
			background: var(--white);
			border-radius: 15px;

			.top {
				padding: 10px;

				.title {
					float: left;
					font-size: var(--font-size-large);
					font-weight: 700;
				}

				.more-btn {
					float: right;
					color: var(--text-light);
					font-size: var(--font-size-medium);

					&::after {
						content: ">";
						margin-left: 5px;
					}
				}

				&::after {
					content: "";
					display: block;
					clear: both;
				}
			}

			.order-grid {
				padding: 15px 10px;
			}
		}

		.my-ticket {
			// margin-top: 10px;
			border-radius: 15px;
			background: var(--white);

			.ticket-grid {
				.grid-item {
					height: 100px;
					display: flex;
					align-items: center;
					justify-content: center;

					view {
						text-align: center;
					}

					.icon {
						margin: 0 auto;
						padding: 3px;
						height: 35px;
						width: 35px;
						line-height: 35px;
					}

					.title {
						margin: 5px 0;
					}
				}
			}
		}

		.my-menu {
			margin-top: 15px;
			border-radius: 15px;
			padding: 5px 10px 20px 10px;
			background: var(--white);
			font-size: var(--font-size-default);

			::v-deep .u-cell-group {
				.u-line:nth-child(1) {
					display: none;
				}

				.u-cell {
					.u-cell__body {
						padding: 15px;

						.u-cell__body__content {
							.u-cell__title {
								.u-cell__title-text {
									font-size: var(--font-size-default);
								}
							}
						}
					}
				}
			}
		}
	}
</style>